'use client';

import { useState, useCallback } from 'react';
import './PtzControls.css';

export default function PtzControls({ 
  channelId, 
  onPtzCommand, 
  onFocusCommand, 
  onIrisCommand,
  disabled = false 
}) {
  const [controlSpeed, setControlSpeed] = useState(30);
  const [activeCommand, setActiveCommand] = useState(null);

  // PTZ基础控制命令
  const handlePtzCommand = useCallback((command) => {
    if (disabled || !onPtzCommand) return;
    
    setActiveCommand(command);
    const speed = Math.floor(controlSpeed * 255 / 100);
    onPtzCommand(channelId, command, speed, speed, Math.floor(controlSpeed * 16 / 100));
  }, [channelId, controlSpeed, onPtzCommand, disabled]);

  // 停止命令
  const handleStop = useCallback(() => {
    if (disabled || !onPtzCommand) return;
    
    setActiveCommand(null);
    onPtzCommand(channelId, 'stop', 0, 0, 0);
  }, [channelId, onPtzCommand, disabled]);

  // 聚焦控制
  const handleFocusCommand = useCallback((command) => {
    if (disabled || !onFocusCommand) return;
    
    const speed = Math.floor(controlSpeed * 255 / 100);
    onFocusCommand(channelId, command, speed);
  }, [channelId, controlSpeed, onFocusCommand, disabled]);

  // 光圈控制
  const handleIrisCommand = useCallback((command) => {
    if (disabled || !onIrisCommand) return;
    
    const speed = Math.floor(controlSpeed * 255 / 100);
    onIrisCommand(channelId, command, speed);
  }, [channelId, controlSpeed, onIrisCommand, disabled]);

  return (
    <div className={`ptz-controls ${disabled ? 'disabled' : ''}`}>
      <div className="ptz-title">云台控制</div>
      
      <div className="ptz-main-controls">
        {/* 主控制区域 */}
        <div className="ptz-direction-controls">
          <div className="control-wrapper">
            {/* 上 */}
            <div 
              className={`control-btn control-top ${activeCommand === 'up' ? 'active' : ''}`}
              onMouseDown={() => handlePtzCommand('up')}
              onMouseUp={handleStop}
              onMouseLeave={handleStop}
            >
              <div className="control-icon">↑</div>
              <div className="control-inner-btn control-inner" />
            </div>
            
            {/* 左 */}
            <div 
              className={`control-btn control-left ${activeCommand === 'left' ? 'active' : ''}`}
              onMouseDown={() => handlePtzCommand('left')}
              onMouseUp={handleStop}
              onMouseLeave={handleStop}
            >
              <div className="control-icon">←</div>
              <div className="control-inner-btn control-inner" />
            </div>
            
            {/* 下 */}
            <div 
              className={`control-btn control-bottom ${activeCommand === 'down' ? 'active' : ''}`}
              onMouseDown={() => handlePtzCommand('down')}
              onMouseUp={handleStop}
              onMouseLeave={handleStop}
            >
              <div className="control-icon">↓</div>
              <div className="control-inner-btn control-inner" />
            </div>
            
            {/* 右 */}
            <div 
              className={`control-btn control-right ${activeCommand === 'right' ? 'active' : ''}`}
              onMouseDown={() => handlePtzCommand('right')}
              onMouseUp={handleStop}
              onMouseLeave={handleStop}
            >
              <div className="control-icon">→</div>
              <div className="control-inner-btn control-inner" />
            </div>
            
            {/* 中心停止按钮 */}
            <div className="control-round">
              <div className="control-round-inner">⏸</div>
            </div>
          </div>

          {/* 速度控制 */}
          <div className="speed-control">
            <label htmlFor="speed-slider">速度: {controlSpeed}%</label>
            <input
              id="speed-slider"
              type="range"
              min="1"
              max="100"
              value={controlSpeed}
              onChange={(e) => setControlSpeed(Number(e.target.value))}
              className="speed-slider"
              disabled={disabled}
            />
          </div>
        </div>

        {/* 缩放和聚焦控制 */}
        <div className="ptz-function-controls">
          {/* 变倍控制 */}
          <div className="function-group">
            <div className="function-title">变倍</div>
            <div className="function-buttons">
              <button
                className="function-btn zoom-in"
                onMouseDown={() => handlePtzCommand('zoomin')}
                onMouseUp={handleStop}
                onMouseLeave={handleStop}
                disabled={disabled}
                title="变倍+"
              >
                🔍+
              </button>
              <button
                className="function-btn zoom-out"
                onMouseDown={() => handlePtzCommand('zoomout')}
                onMouseUp={handleStop}
                onMouseLeave={handleStop}
                disabled={disabled}
                title="变倍-"
              >
                🔍-
              </button>
            </div>
          </div>

          {/* 聚焦控制 */}
          <div className="function-group">
            <div className="function-title">聚焦</div>
            <div className="function-buttons">
              <button
                className="function-btn focus-near"
                onMouseDown={() => handleFocusCommand('near')}
                onMouseUp={() => handleFocusCommand('stop')}
                onMouseLeave={() => handleFocusCommand('stop')}
                disabled={disabled}
                title="聚焦+"
              >
                🎯+
              </button>
              <button
                className="function-btn focus-far"
                onMouseDown={() => handleFocusCommand('far')}
                onMouseUp={() => handleFocusCommand('stop')}
                onMouseLeave={() => handleFocusCommand('stop')}
                disabled={disabled}
                title="聚焦-"
              >
                🎯-
              </button>
            </div>
          </div>

          {/* 光圈控制 */}
          <div className="function-group">
            <div className="function-title">光圈</div>
            <div className="function-buttons">
              <button
                className="function-btn iris-in"
                onMouseDown={() => handleIrisCommand('in')}
                onMouseUp={() => handleIrisCommand('stop')}
                onMouseLeave={() => handleIrisCommand('stop')}
                disabled={disabled}
                title="光圈+"
              >
                ⚪+
              </button>
              <button
                className="function-btn iris-out"
                onMouseDown={() => handleIrisCommand('out')}
                onMouseUp={() => handleIrisCommand('stop')}
                onMouseLeave={() => handleIrisCommand('stop')}
                disabled={disabled}
                title="光圈-"
              >
                ⚪-
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}